<script setup lang="ts">
  defineProps<{
    tab: string,
    tabs: string[],
  }>()

  const emits = defineEmits(['update:tab', 'change'])

  function changeTab(t: string) {
    emits('update:tab', t)
    emits('change', t)
  }
</script>

<template>
  <view class="prize-game-tab-wrapper">
    <view class="tabs">
      <view class="tab" :class="tab === t ? 'active' : ''" @click="() => changeTab(t)" v-for="(t, index) in tabs" :key="index">
        <text class="tab-text">{{ t }}</text>
      </view>
    </view>
  </view>
</template>

<style scoped lang="scss">
  .prize-game-tab-wrapper {
    .tabs {
      margin: 0 auto;
      height: 38px;
      border-style: solid;
      border-image: linear-gradient(90deg, #E174ED 0%, #2F76EC 100%) 1;
      border-width: 1px;
      display: flex;
      padding: 3px;
      justify-content: space-between;
      align-items: center;
      box-sizing: border-box;
      width: min-content;
      gap: 8px;
    }

    .tab {
      width: 84px;
      height: 32px;
      display: flex;
      align-items: center;
      justify-content: space-around;
      background-color: #454545;
    }

    .tab.active {
      background-image: linear-gradient(90deg, #E174ED 0%, #2F76EC 100%);
    }

    .tab .tab-text {
      color: white;
      font-size: 12px;
    }
  }
</style>
